<!-- 历史开奖 -->
<template>
	<view>
		<null-box v-if="activeList.length==0"></null-box>
		<view class="head">
			<view class="head_box">
				<view class="head_box_l button" :class="changeIndex+1==activeList.length?'opacity_active':''"
					@click="previousStep">
					<image class="left_img" src="@/static/blindbox/jackpot/left_white.png" mode=""></image>
					<text style="margin-left: 4rpx;">上一期</text>
				</view>
				<view class="head_box_c ellipseHide">{{activeName}}</view>
				<view class="head_box_r button" :class="changeIndex==0?'opacity_active':''" @click="nextStep">
					<text style="margin-right: 4rpx;">下一期</text>
					<image class="left_img" src="@/static/blindbox/jackpot/right_white.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="main_title">{{endTime}}结束开奖</view>
			<view style="height: 24rpx;" v-if="jackpotList.length==0"></view>
			<view class="main_box" v-for="(item,index) in jackpotList" :key="index">
				<view class="main_box_l">{{item.stageName}} ￥{{item.accumulateMoney}}</view>
				<view class="main_box_r" @click="getNameList(item)">
					<text>中奖名单</text>
					<image class="right_black" src="@/static/blindbox/jackpot/right_black.png" mode=""></image>
				</view>
			</view>
		</view>
		<winner-list ref="winnerList" :id="id"></winner-list>
	</view>
</template>

<script>
	import nullBox from "@/components/null-box/null-box";
	import winnerList from "@/components/winner-list/winner-list";
	export default {
		components: {
			nullBox,
			winnerList,
		},
		data() {
			return {
				isShow: false, //显示中奖名单
				activeList: [], //历史活动列表
				activeName: '', //活动名称
				endTime: '', //活动结束时间
				changeIndex: 0, //当前活动下标
				jackpotList: [], //奖池阶段列表
				id:'',//
			}
		},
		onLoad() {
			this.getHisBoxActivityList()
		},
		methods: {
			async getHisBoxActivityList() { //获取我的排名信息
				uni.showLoading()
				let data = {}
				const res = await this.$api.getHisBoxActivityList(data);
				this.activeList = res.result;
				// let list = [{
				// 		"endTime": "2022-12-31",
				// 		"id": 0,
				// 		"name": "第 3 期"
				// 	},
				// 	{
				// 		"endTime": "2022-10-31",
				// 		"id": 1,
				// 		"name": "第 2 期"
				// 	},
				// 	{
				// 		"endTime": "2022-11-31",
				// 		"id": 2,
				// 		"name": "第 1 期"
				// 	},
				// ];
				// this.activeList = list
				if(this.activeList.length>0){
					this.activeName = this.activeList[0].name
					this.endTime = this.activeList[0].endTime
					this.getHisBoxActivityJackpotList(this.activeList[0].id)
				}
				uni.hideLoading()
			},
			previousStep() { //上一期
				if (this.changeIndex + 1 == this.activeList.length) {
					return
				}
				this.changeIndex++
				console.log(this.changeIndex)
				this.activeName = this.activeList[this.changeIndex].name
				this.endTime = this.activeList[this.changeIndex].endTime
				this.getHisBoxActivityJackpotList(this.activeList[this.changeIndex].id)
			},
			nextStep() { //下一期
				if (this.changeIndex == 0) {
					return
				}
				this.changeIndex--
				console.log(this.changeIndex)
				this.activeName = this.activeList[this.changeIndex].name
				this.endTime = this.activeList[this.changeIndex].endTime
				this.getHisBoxActivityJackpotList(this.activeList[this.changeIndex].id)
			},
			async getHisBoxActivityJackpotList(id) { //获取历史盲盒活动奖池信息
				let data = {
					activityId: id
				}
				const res = await this.$api.getHisBoxActivityJackpotList(data);
				uni.hideLoading()
				this.jackpotList = res.result
				// let list = [{
				// 	"accumulateMoney": 1000,
				// 	"id": 1,
				// 	"stage": 0,
				// 	"stageName": "第一阶段"
				// }]
				// this.jackpotList = list
			},
			getNameList(e){ //获取中奖名单
				this.id  = e.id
				// this.isShow = true winnerList
				this.$refs.winnerList.open(this.id);
			},
			// back() { //中奖名单弹窗返回
			// 	this.isShow = false
			// },
		}
	}
</script>

<style>
	view {
		box-sizing: border-box;
	}

	page {
		background-color: #F6F6F6;
	}

	.head {
		height: 354rpx;
		background: linear-gradient(180deg, #069AFC 0%, #55D2CD 55.39%, rgba(85, 210, 205, 0) 90.5%);
	}

	.head_box {
		display: flex;
		align-items: center;
		justify-content: center;
		/* margin: 0 112rpx; */
		padding-top: 60rpx;
	}

	.head_box_l {
		background: rgba(135,236,255, 0.5);
		border-radius: 200rpx 0rpx 0rpx 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #FFFFFF;
		width: 124rpx;
		height: 48rpx;
	}

	.left_img {
		width: 11rpx;
		height: 14rpx;
	}

	.head_box_c {
		font-size: 40rpx;
		color: #FFFFFF;
		padding: 0 40rpx;
		max-width: 440rpx;
		min-width: 360rpx;
		text-align: center;
	}

	.head_box_r {
		/* background: #87ECFF; */
		background: rgba(135,236,255, 0.5);
		border-radius: 0rpx 200rpx 200rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #FFFFFF;
		width: 124rpx;
		height: 48rpx;
	}

	.main {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 0 30rpx;
		margin: -170rpx 30rpx 100rpx;
	}

	.main_title {
		font-size: 32rpx;
		color: #222222;
		padding-top: 30rpx;
		margin-bottom: 8rpx;
		font-weight: bold;
	}

	.main_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 86rpx;
		border-bottom: 2rpx solid #E1E1E1;
	}

	.main_box:last-child {
		border-bottom: 0;
	}

	.main_box_l {
		font-size: 28rpx;
		color: #222222;
		width: 480rpx;
	}

	.main_box_r {
		font-size: 24rpx;
		color: #666666;
		display: flex;
		align-items: center;
	}

	.right_black {
		width: 11rpx;
		height: 14rpx;
		margin-left: 6rpx;
		margin-top: 2rpx;
	}

	.opacity_active {
		opacity: 0.5;
	}
</style>
